import React from 'react';
import { PackageCheck } from 'lucide-react';
import { Order } from '../../types';

interface DispenserControlProps {
  onDispenseMedication: () => void;
  idleRobotCount: number;
  pendingOrders: Order[];
  isDispenserBusy: boolean;
}

export function DispenserControl({
  onDispenseMedication,
  idleRobotCount,
  pendingOrders,
  isDispenserBusy
}: DispenserControlProps) {
  return (
    <div className="bg-white p-4 rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">智能发药机控制</h2>
      
      <div className="flex items-center justify-between mb-4">
        <div className="space-y-1">
          <p className="text-sm text-gray-600">
            空闲机器人: <span className="font-medium">{idleRobotCount}</span>
          </p>
          <p className="text-sm text-gray-600">
            待处理订单: <span className="font-medium">{pendingOrders.length}</span>
          </p>
        </div>
        
        <button
          onClick={onDispenseMedication}
          disabled={isDispenserBusy || idleRobotCount === 0 || pendingOrders.length === 0}
          className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <PackageCheck size={20} />
          药品交付
        </button>
      </div>

      <div className="text-sm text-gray-500">
        {isDispenserBusy && <p>正在处理订单...</p>}
        {idleRobotCount === 0 && <p>没有空闲机器人</p>}
        {pendingOrders.length === 0 && <p>没有待处理订单</p>}
      </div>
    </div>
  );
}